<template>
  <div id="resume-print-template" class="resume-print-template">
    <div class="resume-header">
      <h1 class="resume-title">伍月女仆面试登记表</h1>
    </div>
    <table class="resume-table">
      <tr>
        <td class="label">可入职时间：</td>
        <td colspan="4"></td>
      </tr>
      <tr>
        <td class="label">填表时间：</td>
        <td colspan="4">{{ formatDate(resume.created_at) }}</td>
      </tr>
      <tr>
        <td class="label">姓名</td>
        <td>{{ resume.name }}</td>
        <td class="label">昵称</td>
        <td>{{ resume.nickname || '' }}</td>
        <td class="photo-cell" rowspan="5">
          <div class="photo-container">
            <img v-if="firstPhoto" :src="firstPhoto" class="applicant-photo" alt="应聘者照片" />
            <div v-else class="no-photo">无照片</div>
          </div>
        </td>
      </tr>
      <tr>
        <td class="label">性别</td>
        <td>{{ genderText(resume.gender) }}</td>
        <td class="label">年龄</td>
        <td>{{ resume.age || '' }}</td>
      </tr>
      <tr>
        <td class="label">体重</td>
        <td>{{ resume.weight || '' }} kg</td>
        <td class="label">学历</td>
        <td>{{ resume.education || '' }}</td>
      </tr>
      <tr>
        <td class="label">兴趣爱好</td>
        <td colspan="3">{{ resume.hobbies || '无' }}</td>
      </tr>
      <tr>
        <td class="label">才艺</td>
        <td colspan="3">{{ resume.special_skills || '无' }}</td>
      </tr>
      <tr>
        <td class="label">手机号码</td>
        <td>{{ resume.phone }}</td>
        <td class="label">微信</td>
        <td colspan="2">{{ resume.wechat }}</td>
      </tr>
      <tr>
        <td class="label">能否配合直播</td>
        <td colspan="4">
          <div class="checkbox-container">
            <span class="checkbox-option">
              <span class="checkbox" :class="{ 'checked': resume.can_livestream === 'yes' }">{{ resume.can_livestream === 'yes' ? '✓' : '' }}</span>
              <span>可以</span>
            </span>
            <span class="checkbox-option">
              <span class="checkbox" :class="{ 'checked': resume.can_livestream === 'no' }">{{ resume.can_livestream === 'no' ? '✓' : '' }}</span>
              <span>不可以</span>
            </span>
          </div>
        </td>
      </tr>
      <tr>
        <td class="label">是否能接受夜班</td>
        <td colspan="4">
          <div class="checkbox-container">
            <span class="checkbox-option">
              <span class="checkbox" :class="{ 'checked': resume.accept_night_shift === 'yes' }">{{ resume.accept_night_shift === 'yes' ? '✓' : '' }}</span>
              <span>可以</span>
            </span>
            <span class="checkbox-option">
              <span class="checkbox" :class="{ 'checked': resume.accept_night_shift === 'no' }">{{ resume.accept_night_shift === 'no' ? '✓' : '' }}</span>
              <span>不可以</span>
            </span>
          </div>
        </td>
      </tr>
      <tr>
        <td class="label">期望工作时间</td>
        <td colspan="4">
          <div class="checkbox-container">
            <span class="checkbox-option">
              <span class="checkbox" :class="{ 'checked': resume.preferred_shift === 'day' }">{{ resume.preferred_shift === 'day' ? '✓' : '' }}</span>
              <span>早班（12:00-20:00）</span>
            </span>
            <span class="checkbox-option">
              <span class="checkbox" :class="{ 'checked': resume.preferred_shift === 'night' }">{{ resume.preferred_shift === 'night' ? '✓' : '' }}</span>
              <span>晚班（18:00-次日 02:00）</span>
            </span>
          </div>
        </td>
      </tr>
      <tr>
        <td class="label">每周空闲时间</td>
        <td colspan="4">{{ resume.weekly_availability || '无' }}</td>
      </tr>
      <tr>
        <td class="label" rowspan="3">工作经历</td>
        <td class="sub-label">起止时间</td>
        <td class="sub-label">工作单位</td>
        <td class="sub-label" colspan="2">职位</td>
      </tr>
      <template v-if="resume.work_experience && resume.work_experience.length">
        <tr v-for="(exp, index) in limitedWorkExperience" :key="index" class="work-exp-row">
          <td>{{ formatDateRange(exp.startDate, exp.endDate) }}</td>
          <td>{{ exp.company }}</td>
          <td colspan="2">{{ exp.position }}</td>
        </tr>
        <tr v-if="limitedWorkExperience.length < 3" class="work-exp-row">
          <td></td><td></td><td colspan="2"></td>
        </tr>
      </template>
      <template v-else>
        <tr class="work-exp-row">
          <td></td><td></td><td colspan="2"></td>
        </tr>
        <tr class="work-exp-row">
          <td></td><td></td><td colspan="2"></td>
        </tr>
      </template>
      <tr>
        <td class="label">桌游与switch熟悉程度</td>
        <td colspan="4">{{ gameExperienceText(resume.game_experience) }}</td>
      </tr>
      <tr>
        <td class="label">自我介绍</td>
        <td colspan="4" class="self-intro">{{ resume.self_introduction || '无' }}</td>
      </tr>
      <tr>
        <td class="label">应聘者签名：</td>
        <td colspan="4"></td>
      </tr>
      <tr>
        <td class="label" style="height: 40px;">店长签名：</td>
        <td></td>
        <td class="label" style="height: 40px;">女仆长签名：</td>
        <td colspan="2"></td>
      </tr>
      <tr>
        <td class="label" style="height: 40px;">综合考虑：</td>
        <td colspan="4"></td>
      </tr>
    </table>
  </div>
</template>

<script setup>
import { defineProps, computed } from 'vue';
import { formatDate as formatDateUtil } from '../utils/date';

const props = defineProps({
  resume: {
    type: Object,
    required: true
  }
});

// 获取第一张照片
const firstPhoto = computed(() => {
  if (props.resume.photos && Array.isArray(props.resume.photos) && props.resume.photos.length > 0) {
    return props.resume.photos[0];
  }
  return null;
});

// 限制工作经历最多显示2条，确保一页能显示完整
const limitedWorkExperience = computed(() => {
  if (!props.resume.work_experience || !props.resume.work_experience.length) {
    return [];
  }
  return props.resume.work_experience.slice(0, 2);
});

// 性别文本
const genderText = (gender) => {
  const map = {
    male: '男',
    female: '女',
    other: '其他'
  };
  return map[gender] || '未知';
};

// 游戏经验文本
const gameExperienceText = (exp) => {
  const map = {
    none: '完全不了解',
    basic: '略有了解',
    familiar: '比较熟悉',
    expert: '非常熟悉'
  };
  return map[exp] || '';
};

// 格式化日期
const formatDate = (date) => {
  if (!date) return '';
  return formatDateUtil(date);
};

// 格式化日期范围
const formatDateRange = (start, end) => {
  if (!start) return '';
  const startStr = formatDateUtil(start, 'YYYY-MM-DD');
  const endStr = end ? formatDateUtil(end, 'YYYY-MM-DD') : '至今';
  return `${startStr} ~ ${endStr}`;
};
</script>

<style scoped>
.resume-print-template {
  width: 21cm;
  min-height: 29.7cm;
  padding: 0.8cm;
  margin: 0 auto;
  background-color: #ffffff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  font-family: 'SimSun', '宋体', sans-serif;
  color: #000;
  box-sizing: border-box;
}

.resume-header {
  text-align: center;
  margin-bottom: 10px;
}

.resume-title {
  font-size: 20px;
  font-weight: bold;
  margin: 0;
  padding: 5px 0;
}

.resume-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.resume-table td {
  border: 1px solid #000;
  padding: 4px 6px;
  vertical-align: middle;
  height: 34px;
  font-size: 14px;
}

.label {
  font-weight: bold;
  text-align: center;
  background-color: #ffffff;
  width: 110px;
}

.sub-label {
  font-weight: bold;
  text-align: center;
  background-color: #ffffff;
}

.self-intro {
  height: 60px;
  vertical-align: top;
}

.work-exp-row td {
  height: 32px;
  padding: 2px 6px;
}

.checkbox-container {
  display: flex;
  gap: 20px;
}

.checkbox-option {
  display: flex;
  align-items: center;
  gap: 5px;
}

.checkbox {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 1px solid #000;
  text-align: center;
  line-height: 14px;
  font-size: 12px;
  font-weight: bold;
}

.checkbox.checked {
  background-color: #ffffff;
  color: #000;
}

.photo-cell {
  width: 120px;
  height: 160px;
  vertical-align: middle;
  text-align: center;
}

.photo-container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.applicant-photo {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.no-photo {
  color: #999;
  font-size: 14px;
}

@media print {
  .resume-print-template {
    width: 100%;
    height: auto;
    background-color: #ffffff;
    box-shadow: none;
    padding: 0;
  }
  
  @page {
    size: A4;
    margin: 0.8cm;
  }
}
</style> 